<template>
	<view class="c2bDetails" v-if="showC2bDetails" @touchStart.stop="closeTouchStart" @touchmove.stop="closeTouchStart" @touchend.stop="closeTouchStart" >
		<view class="container">
			<view class="close_btn" @click.stop="close">
				<image src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/X.png"></image>
			</view>
			<view class="img_box">
				<swiper :circular="circular" :current="currentIndex" :autoplay="swiperAutoplay" interval="4000"
					duration="500" :indicator-dots="false" indicator-active-color="rgba(0, 0, 0, 0)"
					indicator-color="rgba(0, 0, 0, 0)" class="swiper_box" @change="swiperChange">
					<block v-for="(swiperItem, swiperIndex) in userC2bDetailsImg" :key="swiperIndex">
						<block v-if="swiperIndex !=2">
							<swiper-item>
								<image :src="swiperItem" :data-src="swiperItem" class="slide-image" mode="widthFix" />
							</swiper-item>
					   </block>
					</block>
				</swiper>
			</view>
			<view class="swiper-dots" v-if="userC2bDetailsImg && userC2bDetailsImg.length > 1">
				<block v-for="(swiperItem, swiperIndex) in userC2bDetailsImg" :key="swiperIndex">
					<block v-if="swiperIndex !=2">
						<view class="swiper-dots-item">
							<image :src="swiperIndex == currentIndex ? swiperDotsActImg : swiperDotsAct"
								style="width: 100%;height: 100%;" />
						</view>
					</block>
				</block>
			</view>
			<view class="c2b_text">
				<block v-for="(item, index) in c2bTextLine1" :key="index">
					<img v-if="item === '□'" :src="giftSvg" class="c2b_text_img" />
					<img v-else-if="item === '☆'" :src="starSvg" class="c2b_text_img" />
					<img v-else-if="item === '♡'" :src="heartSvg" class="c2b_text_img" />
					<img v-else-if="item === '＆'" :src="andSvg" style="height: 30rpx;" class="c2b_text_img" />
					<text v-else-if="item === ' '" style="width:12rpx;"></text>
					<text v-else>{{ item }}</text>
				</block>
			</view>
			<view class="c2b_text">
				<block v-for="(item, index) in c2bTextLine2" :key="index">
					<img v-if="item === '□'" :src="giftSvg" class="c2b_text_img" />
					<img v-else-if="item === '☆'" :src="starSvg" class="c2b_text_img" />
					<img v-else-if="item === '♡'" :src="heartSvg" class="c2b_text_img" />
					<img v-else-if="item === '＆'" :src="andSvg" style="height: 30rpx;" class="c2b_text_img" />
					<text v-else-if="item === ' '" style="width:12rpx;"></text>
					<text v-else>{{ item }}</text>
				</block>
			</view>
			<view class="bottom_btn" @click.stop="handleBtnClick">确认</view>
			<view class="c2b_tipstext">*产品及镌刻效果以实物为准</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showC2bDetails: false,
			userC2bDetailsImg: [],
			swiperChangeTimeStamp: new Date().getTime(),
			circular: true,
			currentIndex: 0,
			swiperAutoplay: true,
			swiperDotsActImg: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/pdp/dot2.png",
			swiperDotsAct: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/pdp/dot1.png",
			c2bTextLine1: [],
			c2bTextLine2: [],
			giftSvg: "",
			starSvg: "",
			heartSvg: "",
			andSvg: "",
		}
	},
	methods: {
		closeTouchStart(){

		},
		/**
		 * @param {Object} details
		 * @param {Object} textArr  文案
		 *    ＆ ————>  &符号
		 * 		♡ ————>  心 
		 * 		☆ ————>  五角星 
		 * 		□ ————>  礼物 
		 */
		show(details, textArr) {
			try {
				if (Array.isArray(details) && Array.isArray(textArr)) {
					const {
						gift_svg,
						star_svg,
						heart_svg,
						and_svg
					} = require('./c2bDetails.svg.js');
					this.giftSvg = gift_svg();
					this.starSvg = star_svg();
					this.heartSvg = heart_svg();
					this.andSvg = and_svg();

					this.showC2bDetails = true;
					this.userC2bDetailsImg = details;
					this.c2bTextLine1 = textArr[0] || [];
					this.c2bTextLine2 = textArr[1] || [];
				}
			} catch (e) {

			}
		},
		close() {
			this.showC2bDetails = false;
			this.userC2bDetailsImg = "";
		},
		handleBtnClick() {
			this.close();
			this.$emit("onC2bDetailsEvent", "C2B_BTN");
		},
		swiperChange(e) {
			let currentTimeStamp = new Date().getTime()
			let {
				current,
				source
			} = e.detail
			if (currentTimeStamp - this.swiperChangeTimeStamp <= 500) {
				this.swiperChangeTimeStamp = currentTimeStamp
				return false
			} else {
				this.swiperChangeTimeStamp = currentTimeStamp
			}
			this.currentIndex = e.detail.current;
		},
	}
}
</script>

<style lang="scss">
.c2bDetails {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 99999;

	.container {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 654rpx;
		background: #fff;
		left: 48rpx;
		padding: 128rpx 64rpx 96rpx 64rpx;

		.close_btn {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
			width: 64rpx;
			height: 64rpx;

			image {
				width: 40%;
				height: 40%;
				margin: 30%;
			}
		}

		.img_box {
			width: 526rpx;
			height: 526rpx;
			overflow: hidden;
			position: relative;

			.user_c2b_img {
				width: 100%;
				height: 100%;
				transform: scale(1);
				transform-origin: bottom;
				transition: all 300ms;
			}
		}

		.text_box {
			font-size: 24rpx;
			font-weight: normal;
			text-align: center;
			line-height: 48rpx;
			font-family: FrankNew-Regular, NotoSansSC-Regular;
			color: #757575;
		}
	}
}

.swiper_box {
	width: 100%;
	height: 100%;
}

.slide-image {
	width: 100%;
	height: 100%;
}

.swiper-dots {
	width: 100%;
	height: 16rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin: 40rpx 0;
}

.swiper-dots-item {
	position: relative;
	width: 36rpx;
	height: 16rpx;
	padding: 0;
	margin: 0 18rpx;
	flex-shrink: 0;
	font-size: 0;
}

.bottom_btn {
	width: 526rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 24px 8px 24px 24px;
	text-align: center;
	font-size: 28rpx;
	font-weight: 500;
	color: #fff;
	background-color: #000;
	margin-top: 40rpx;
	font-family: NotoSansSC-Medium;
}

.c2b_text {
	font-size: 24rpx;
	line-height: 48rpx;
	font-weight: normal;
	font-family: FrankNew-Regular, NotoSansSC-Regular;
	color: #757575;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.c2b_tipstext {
	font-family: FrankNew-Regular, NotoSansSC-Regular;
	font-size: 20rpx;
	font-weight: normal;
	line-height: 32rpx;
	text-align: center;
	color: #757575;
	margin-top: 32rpx;
}

.c2b_text_img {
	width: 22rpx;
	height: 22rpx;
	margin: 13rpx 4rpx;
}
</style>